<template>
  <div class="page-main">
    <!-- 上主表 -->
    <query-page
      ref="queryPageComp"
      title="供应商信息查询"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="renderKeys"
      :table-render-config="mainform"
      :table-render-keys="mainformKeys"
      :loading="isLoading"
      :data="renderData"
      :has-line="true"
      :total="total"
      @query-data="getData"
    >
      <template #optional="row">
        <a-button type="text" @click="listDetails(row.record)">详情</a-button>
      </template>
    </query-page>
    <myModal
      v-if="showModal"
      :details-id="detailsId"
      :data-list-edit="dataListEdit"
      title="详情"
      @close="closeModal"
    ></myModal>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineAsyncComponent } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import useModal from '@/common/hooks/modal';
  import {
    formComponentConfig,
    formRenderConfig,
    renderKeys,
  } from '@/views/basic-configuration/supplier-information/supplier-form';
  import {
    mainform,
    mainformKeys,
  } from '@/views/basic-configuration/definitionsuppliers/suppliercolumns';
  import { selectMainPage } from '@/api/supplier/quotation-information';
  //
  const { showModal, openModal, closeModal } = useModal();
  const myModal = defineAsyncComponent(
    () =>
      import(
        '@/views/basic-configuration/components/supplier-information-modal.vue'
      )
  );
  const isLoading = ref(true);
  const total = ref();

  const renderData = ref<any[]>([]);
  // 查询主表信息
  const getData = async (queryInfo?: object) => {
    renderData.value = [];
    isLoading.value = true;
    const { data } = await selectMainPage(queryInfo);
    data.list.map((item: any, num: any) => {
      item.index = num + 1;
      return item;
    });
    renderData.value = data.list;
    total.value = data.total;
    isLoading.value = false;
  };
  const detailsId = ref();
  const listDetails = (row: any) => {
    detailsId.value = row.supplierCode;
    openModal();
  };
</script>

<style scoped lang="less"></style>
